<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>媒体查询</title>
	</head>
	<style>
		@media (max-width:5000px) {
			body {
				margin: 0 auto;
				width: 1000Px;
			}

			.left {
				float: left;
				width: 450px;
				height: 1200px;
				margin-left: 25px;
				margin-right: 25px;
				background-color: #99FFCC;
			}

			.right {
				float: right;
				width: 450px;
				height: 1200px;
				margin-left: 25px;
				margin-right: 25px;
				background-color: #FFFF99;
			}

			.rtop {
				width: 450px;
				height: 150px;
				background-color: #CCFFFF;
				padding: 0;
				position: absolute;
				left: auto;
				top: 250px;
				font-size: 14px;
				line-height: 21px;
				text-align: center;
				overflow: hidden;
			}


			.rcenter {
				width: 450px;
				height: 150px;
				background-color: #CCFFFF;
				position: absolute;
				ss left: auto;
				top: 650px;
				text-align: center;
				overflow: hidden;
			}


			.rbottom {
				width: 450px;
				height: 150px;
				background-color: #CCFFFF;
				padding: 0;
				position: absolute;
				left: auto;
				top: 1050px;
				font-size: 20px;
				line-height: 30px;
				text-align: center;
				overflow: hidden;
			}


		}

		@media screen and(min-width:750px) and (max-width:1000px) {
			body {
				margin: 0 auto;
				width: 750Px;
			}

			.left {
				float: left;
				width: 350px;
				height: 900px;
				margin-right: 25px;
				background-color: #99FFCC;
			}

			.right {
				float: right;
				width: 350px;
				height: 900px;
				margin-left: 25px;
				background-color: #FFFF99;
			}

			.rtop {
				width: 350px;
				height: 100px;
				background-color: #CCFFFF;
				padding: 0;
				position: absolute;
				left: auto;
				top: 200px;
				font-size: 14px;
				line-height: 21px;
				text-align: center;
				overflow: hidden;
			}


			.rcenter {
				width: 350px;
				height: 100px;
				background-color: #CCFFFF;
				position: absolute;
				left: auto;
				top: 500px;
				text-align: center;
				overflow: hidden;
			}


			.rbottom {
				width: 350px;
				height: 100px;
				background-color: #CCFFFF;
				position: absolute;
				left: auto;
				top: 800px;
				font-size: 20px;
				line-height: 30px;
				text-align: center;
				overflow: hidden;
			}
		}

		@media screen and (min-width: 320px) and (max-width: 750px) {
			body {
				margin: 0 auto;
				width: 320Px;
			}

			.left {
				margin: 0 auto;
				width: 320px;
				height: 300px;
				background-color: #99FFCC;
			}

			.right {
				margin: 0 auto;
				width: 320px;
				height: 900px;
				background-color: #FFFF99;
			}

			.rtop {
				width: 320px;
				height: 100px;
				background-color: #CCFFFF;
				padding: 0;
				position: absolute;
				left: auto;
				top: 500px;
				font-size: 14px;
				line-height: 21px;
				text-align: center;
				overflow: hidden;
			}


			.rcenter {
				width: 320px;
				height: 100px;
				background-color: #CCFFFF;
				position: absolute;
				left: auto;
				top: 800px;
				text-align: center;
				overflow: hidden;
			}


			.rbottom {
				width: 320px;
				height: 100px;
				background-color: #CCFFFF;
				position: absolute;
				left: auto;
				top: 1100px;
				font-size: 20px;
				line-height: 30px;
				text-align: center;
				overflow: hidden;
			}
		}
	</style>




	<body>
		<div class="left">

		</div>


		<div class="right">
			<div class="rtop">
				<p>这是第一段文字这是第一段文字这是第一段文字
					这是第一段文字这是第一段文字这是第一段文字
					这是第一段文字这是第一段文字这是第一段文字
					这是第一段文字这是第一段文字这是第一段文字</p>
			</div>

			<div class="rcenter">
				<p>这是第二段文字这是第二段文字这是第二段文字
					这是第二段文字这是第二段文字这是第二段文字
					这是第二段文字这是第二段文字这是第二段文字
					这是第二段文字这是第二段文字这是第二段文字</p>
			</div>

			<div class="rbottom">
				<p>这是第三段文字这是第三段文字这是第三段文字
					这是第三段文字这是第三段文字这是第三段文字
					这是第三段文字这是第三段文字这是第三段文字
					这是第三段文字这是第三段文字这是第三段文字</p>
			</div>

		</div>


	</body>
</html>
